<template>
    <div id="webcontent" ref="dragBox" @mousedown="mouseDownHandleelse($event)" @mouseup="mouseUpHandleelse($event)">
        <div class="item">
            <slot name="content"></slot>
        </div>
        <div class="upBtn" @mousedown.stop="onDragDown($event, 'n')" @mouseup.stop="onDragUp"></div>
        <div class="downBtn" @mousedown.stop="onDragDown($event, 's')" @mouseup.stop="onDragUp"></div>
        <div class="upLeftBtn" @mousedown.stop="onDragDown($event, 'nw')" @mouseup.stop="onDragUp"></div>
        <div class="upRightBtn" @mousedown.stop="onDragDown($event, 'ne')" @mouseup.stop="onDragUp"></div>
        <div class="downLeftBtn" @mousedown.stop="onDragDown($event, 'sw')" @mouseup.stop="onDragUp"></div>
        <div class="downRightBtn" @mousedown.stop="onDragDown($event, 'se')" @mouseup.stop="onDragUp"></div>
        <div class="centerLeftBtn" @mousedown.stop="onDragDown($event, 'w')" @mouseup.stop="onDragUp"></div>
        <div class="centerRightBtn" @mousedown.stop="onDragDown($event, 'e')" @mouseup.stop="onDragUp"></div>
    </div>
</template>
<script>
import $$ from 'jquery';
export default {
    data () {
        return {
            obj: {},// 当前操作的对象
            preview: null, // 要处理的对象
            clickX: 0, // 保留上次的X轴位置
            clickY: 0, // 保留上次的Y轴位置

            moveDataelse: {
                x: null,
                y: null
            },
            moveWh: {
                x: null,
                y: null
            },
            htmlData: [],

            mainPosition: {},//编辑框位置信息
        }
    },
    mounted () {
        document.onmousemove = this.onDragMove;
        document.onmouseup = this.onDragUp;
    },
    methods: {
        mouseDownHandleelse (event) {
            this.moveDataelse.x = event.pageX - this.$refs.dragBox.offsetLeft
            this.moveDataelse.y = event.pageY - this.$refs.dragBox.offsetTop
            event.currentTarget.style.cursor = 'move';
            window.onmousemove = this.mouseMoveHandleelse;
        },
        mouseMoveHandleelse (event) {
            let moveLeft = event.pageX - this.moveDataelse.x;
            let moveTop = event.pageY - this.moveDataelse.y;

            this.$refs.dragBox.style.left = moveLeft + 'px'
            this.$refs.dragBox.style.top = moveTop + 'px'
            if (moveLeft <= 0) {
                //左侧不能超出
                this.$refs.dragBox.style.left = 0 + 'px'
            }
            if (moveTop <= 0) {
                //顶部不能超出
                this.$refs.dragBox.style.top = 0 + 'px'
            }
            if (moveLeft > this.mainPosition.width - this.$refs.dragBox.offsetWidth - 2) {
                //右侧不能超出
                this.$refs.dragBox.style.left = (this.mainPosition.width - this.$refs.dragBox.offsetWidth - 2) + 'px'
            }
            if (moveTop > this.mainPosition.height - this.$refs.dragBox.offsetHeight - 2) {
                //底部不能超出
                this.$refs.dragBox.style.top = (this.mainPosition.height - this.$refs.dragBox.offsetHeight - 2) + 'px'
            }
        },
        mouseUpHandleelse (event) {
            window.onmousemove = null
            event.currentTarget.style.cursor = 'move'
            console.log('鼠标松开了')
        },



        $ (id) {
            return document.getElementById(id);
        },
        getEvent (e) {
            return e || window.event;
        },
        getLocation (e) {
            return {
                x: e.x || e.clientX,
                y: e.y || e.clientY
            }
        },
        onDragDown (e, type) {
            e = this.getEvent(e);
            var location = this.getLocation(e);
            this.clickY = location.y;
            this.clickX = location.x;
            this.obj.operateType = type;
            return false;
        },
        onUpBtnDown (e) {
            this.onDragDown(e, "n");
        },
        onDownBtnDown (e) {
            this.onDragDown(e, "s");
        },
        onCenterLeftBtnDown (e) {
            this.onDragDown(e, "w");
        },
        onCenterRightBtnDown (e) {
            this.onDragDown(e, "e");
        },
        onUpLeftBtnDown (e) {
            this.onDragDown(e, "nw");
        },
        onUpRightBtnDown (e) {
            this.onDragDown(e, "ne");
        },
        onDownLeftBtnDown (e) {
            this.onDragDown(e, "sw");
        },
        onDownRightBtnDown (e) {
            this.onDragDown(e, "se");
        },
        onDragUp () {
            document.body.style.cursor = "auto";
            this.obj = {};
        },
        move (operateType, location) {
            let preview = $$('#webcontent');
            // console.log('移动中', $$('#webcontent').height());
            document.body.style.cursor = location + "_resize";
            switch (operateType) {
                case "e":
                    var add_length = this.clickX - location.x;
                    this.clickX = location.x;
                    var length = parseInt(preview.width()) - add_length;
                    preview.width(length + "px");
                    // preview.css({ "width": length + "px" })
                    break;
                case "s":
                    var add_length = this.clickY - location.y;
                    this.clickY = location.y;
                    var length = parseInt(preview.height()) - add_length;
                    preview.height(length + "px");
                    break;
                case "w":
                    var add_length = this.clickX - location.x;
                    this.clickX = location.x;
                    console.log('左边:', preview.width(), add_length, this.clickX, location.x)
                    var length = parseInt(preview.width()) + add_length;
                    preview.width(length + "px");
                    preview.css({ "left": this.clickX + "px" })
                    break;
                case "n":
                    var add_length = this.clickY - location.y;
                    this.clickY = location.y;
                    var length = parseInt(preview.height()) + add_length;
                    preview.height(length + "px");
                    preview.css({ "top": this.clickY + "px" })
                    break;
            }
        },
        onDragMove (e) {
            if (this.obj.operateType) {
                e = this.getEvent(e);
                var location = this.getLocation(e);
                switch (this.obj.operateType) {
                    case "n":
                        this.move("n", location);
                        break;
                    case "s":
                        this.move("s", location);
                        break;
                    case "w":
                        this.move("w", location);
                        break;
                    case "e":
                        this.move("e", location);
                        break;
                    case "nw":
                        this.move("n", location);
                        this.move("w", location);
                        break;
                    case "ne":
                        this.move("n", location);
                        this.move("e", location);
                        break;
                    case "sw":
                        this.move("s", location);
                        this.move("w", location);
                        break;
                    case "se":
                        this.move("s", location);
                        this.move("e", location);
                        break;
                }
            }
            return false;
        }
    }
}
</script>
<style lang="less">
    #webcontent {
        width: 200px;
        height: 200px;
        position: absolute;
        border: 2px dashed #cccccc;
        box-sizing: border-box;
        z-index: 2;
        left: 200px;
        top: 100px;
    }

    .item {
        cursor: move;
        width: 100%;
        height: 100%;
        background: #FFFFFF;
    }

    .upBtn,
    .downBtn,
    .upLeftBtn,
    .upRightBtn,
    .downLeftBtn,
    .downRightBtn,
    .centerLeftBtn,
    .centerRightBtn {
        position: absolute;
        background: rgba(0, 0, 0, 0);
        width: 4px;
        height: 4px;
        z-index: 5;
    }

    .upBtn {
        width: 100%;
        top: -2px;
        cursor: n-resize;
    }

    .downBtn {
        bottom: -2px;
        width: 100%;
        cursor: s-resize;
    }

    .upLeftBtn {
        top: -2px;
        left: -2px;
        cursor: nw-resize;
    }

    .upRightBtn {
        top: -2px;
        right: -2px;
        cursor: ne-resize;
    }

    .downLeftBtn {
        bottom: -2px;
        left: -2px;
        cursor: sw-resize;
    }

    .downRightBtn {
        bottom: -2px;
        right: -2px;
        cursor: se-resize;
    }

    .centerLeftBtn {
        height: 100%;
        left: -2px;
        top: 0;
        cursor: w-resize;
    }

    .centerRightBtn {
        height: 100%;
        right: -2px;
        top: 0;
        cursor: e-resize;
    }
</style>